import React, {Component} from 'react';
import {Dimensions, RefreshControl, ScrollView, StyleSheet, View} from 'react-native';
import ListContent from "./ListItem";
import NavBar, {NavButton, NavTitle} from 'react-native-nav'
import Icon from 'react-native-vector-icons/Ionicons';
import {connect} from "react-redux";

const {height, width} = Dimensions.get('window');
const conent = "sjkdhfjesaafhjklsfhsdfghldkshfghlsdghlkdhgldkhgdlkgdklghdhgdkhgldkhgdlhjghdlskhlhghlkdkhglkd"

class Collection extends Component {
    constructor(props) {
        super(props);
        this.state = {
            refreshing: false,
        };
    }

    render() {
        return (
            <View>
                <NavBar style={styles} statusBar={{backgroundColor: '#3396fb'}}>
                    <NavButton
                        style={styles.button}
                        onPress={() => {
                        }}
                    >
                        <Icon name="ios-arrow-back" size={30} color="#3396fb"/>
                    </NavButton>

                    <NavTitle style={styles.title}>
                        {'我的收藏'}
                    </NavTitle>
                </NavBar>
                <ScrollView
                    style={{backgroundColor: '#fff'}}
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={() => {
                                this.setState({refreshing: true});
                                setTimeout(() => {
                                    this.setState({refreshing: false});
                                }, 1000)
                            }}
                        />}>
                    <ListContent
                        index={conent}
                        title={conent}
                        content={conent}
                        agreeNumber={conent}
                        commentNumber={conent}/>
                    <ListContent
                        index={2}
                        title={conent}
                        content={conent}
                        agreeNumber={conent}
                        commentNumber={conent}/>
                    <ListContent
                        index={3}
                        title={conent}
                        content={conent}
                        agreeNumber={conent}
                        commentNumber={conent}/>
                    <ListContent
                        index={4}
                        title={conent}
                        content={conent}
                        agreeNumber={conent}
                        commentNumber={conent}/><ListContent
                    index={5}
                    title={conent}
                    content={conent}
                    agreeNumber={conent}
                    commentNumber={conent}/>

                </ScrollView>
            </View>
        )

    }

}


const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    statusBar: {
        backgroundColor: '#fff',
        height: height * 0.05,
    },
    navBar: {
        backgroundColor: '#3396fb',
    },
    title: {
        flex: 1,
        textAlign: 'center',
        color: '#rgba(0, 0, 0, 0.65)',
    },
    buttonText: {
        color: '#rgba(0, 0, 0, 0.45)',
    },
});


export default connect(
    (state) => {
        return {
            mainNavigation: state.mainNavigation
        }
    }
)(Collection)
